<template>
  <d2-container>
    <div>
      <div class="free">
        <ul>
          <li class="second">
            <span>发货人</span>
            <el-input size="small" v-model="recipient" placeholder="请输入收件人姓名"></el-input>
            <span>手机号码</span>
            <el-input size="small" v-model="phoneNum" placeholder="请输入手机号码"></el-input>
          </li>
          <li class="second">
            <el-row>
              <span>省份</span>
              <el-select v-model="addressor_state" placeholder="请选择" @change="selectProvimce">
                <el-option
                  v-for="(item,index) of provincearr"
                  :key="index"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
              <span>市</span>
              <el-select v-model="addressor_city" placeholder="请选择" @change="selectcity">
                <el-option v-for="(item,index) of cityarr" :key="index" :label="item.name" :value="item.name"></el-option>
              </el-select>
              <span>区</span>
              <el-select placeholder="请选择" v-model="addressor_district">
                <el-option
                  v-for="(item,index) of regionarr"
                  :key="index"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-row>
          </li>
          <li class="second">
            <span>详细地址</span>
            <el-input size="small" v-model="detailArdess" placeholder="请输入地址"></el-input>
          </li>
          <li style="text-align:center;">
            <el-button type="primary" @click="onCreated">增加</el-button>
          </li>
        </ul>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="sender_name"
          label="寄件人姓名">
        </el-table-column>
        <el-table-column
          prop="sender_phone"
          label="寄件人手机">
        </el-table-column>
        <el-table-column
          prop="sender_prov"
          label="寄件人省份">
        </el-table-column>
        <el-table-column
          prop="sender_city"
          label="寄件人城市">
        </el-table-column>
        <el-table-column
          prop="sender_county"
          label="寄件人区县">
        </el-table-column>
        <el-table-column
          prop="sender_address"
          label="寄件人详细地址">
        </el-table-column>
        <el-table-column
          label="修改">
          <template slot-scope="scope">
            <el-button type="primary" @click="dialogVisible = true;edit = scope.row">修改</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="增加">
          <template slot-scope="scope">
            <el-button type="danger" @click="deledata(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        :visible.sync="dialogVisible">
        <el-form :model="edit" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="寄件人姓名" prop="pass">
            <el-input type="text" v-model="edit.sender_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="寄件人手机" prop="checkPass">
            <el-input type="text" v-model="edit.sender_phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="寄件人省份" prop="age">
            <el-input v-model="edit.sender_prov"></el-input>
          </el-form-item>
          <el-form-item label="寄件人城市" prop="age">
            <el-input v-model="edit.sender_city"></el-input>
          </el-form-item>
          <el-form-item label="寄件人区县" prop="age">
            <el-input v-model="edit.sender_county"></el-input>
          </el-form-item>
          <el-form-item label="详细地址" prop="age">
            <el-input v-model="edit.sender_address"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updata()">确 定</el-button>
      </span>
      </el-dialog>
    </div>
  </d2-container>
</template>

<script>
  import {addresslist, create_address, del_address, up_address} from '@/api/api'
  import {province} from '@/api/map.js'

  export default {
    name: "address",
    data() {
      return {
        cityarr: [],
        provincearr: [],
        regionarr: [],
        provinceValue: '',
        cityValue: '',
        RegionValue: '',
        recipient: "",
        phoneNum: "",
        edit: {
          id: "",
          sender_name: "",
          sender_phone: "",
          sender_prov: "",
          sender_city: "",
          sender_county: "",
          sender_address: ""
        },
        addressor_state: "",
        addressor_city: "",
        addressor_district: "",
        detailArdess: "",
        province: [],
        shi1: [],
        qu1: [],
        dialogVisible: false,
        tableData: []
      }
    },
    created() {
      this.provincearr = province
      this.getCityData()
      this.getTableData()
    },
    methods: {
      selectProvimce(name) {
        this.cityarr = [];
        this.regionarr = [];
        this.cityValue = '';
        this.RegionValue = '';
        for (let item of this.provincearr) {
          if (name == item.name) {
            this.cityarr = item.children
          }
        }
      },
      selectcity(name) {
        this.regionarr = [];
        this.RegionValue = '';
        for (let item of this.cityarr) {
          if (name == item.name) {
            this.regionarr = item.children
          }
        }
      },
      //删除
      deledata(id) {
        let params = {
          address_id: id
        }
        del_address(params).then((res) => {
          this.$message.success(res.Message)
          this.getTableData()
        })
      },
      //修改
      updata() {
        let paraming = {
          id: this.edit.id,
          sender_name: this.edit.sender_name,
          sender_phone: this.edit.sender_phone,
          sender_prov: this.edit.sender_prov,
          sender_city: this.edit.sender_city,
          sender_county: this.edit.sender_county,
          sender_address: this.edit.sender_address,
          status: 1
        }
        up_address(paraming).then((res) => {
          this.$message(res.Message)
          this.dialogVisible = false
          this.getTableData()
        })
      },
      //创建
      onCreated() {
        let params = {
          sender_city: this.addressor_city,
          sender_address: this.detailArdess,
          sender_prov: this.addressor_state,
          sender_phone: this.phoneNum.replace(/\s/g, ""),
          sender_name: this.recipient,
          sender_county: this.addressor_district,
        }
        create_address(params).then((res) => {
          this.$message(res.Message)
          this.getTableData()
        })
      },
      //获取列表
      getTableData() {
        let params = {
          page: 1
        }
        addresslist(params).then((res) => {
          this.tableData = res.Data
        })
      },
      // 获取省市区全部数据
      getCityData() {
        var that = this
        that.$axios.get(that.mapJson).then(function (response) {
          if (response.status == 200) {
            var data = response.data
            that.province = []
            that.city = []
            that.block = []
            // 省市区数据分类
            for (var item in data) {
              if (item.match(/0000$/)) {
                //省
                that.province.push({
                  id: item,
                  value: data[item],
                  children: []
                })
              } else if (item.match(/00$/)) {
                //市
                that.city.push({id: item, value: data[item], children: []})
              } else {
                //区
                that.block.push({id: item, value: data[item]})
              }
            }
            // 分类市级
            for (var index in that.province) {
              for (var index1 in that.city) {
                if (that.province[index].id.slice(0, 2) === that.city[index1].id.slice(0, 2)) {
                  that.province[index].children.push(that.city[index1])
                }
              }
            }
            // 分类区级
            for (var item1 in that.city) {
              for (var item2 in that.block) {
                if (that.block[item2].id.slice(0, 4) === that.city[item1].id.slice(0, 4)) {
                  that.city[item1].children.push(that.block[item2])
                }
              }
            }
          }
        })
          .catch(function (error) {
          })
      },
      // 选省
      choseProvince(e) {
        for (var index2 in this.province) {
          if (e === this.province[index2].value) {
            this.shi1 = this.province[index2].children
            this.qu1 = this.province[index2].children[0].children
          }
        }
      },
      // 选市
      choseCity(e) {
        for (var index3 in this.city) {
          if (e === this.city[index3].value) {
            this.qu1 = this.city[index3].children
          }
        }
      },
      find(str, cha, num) {
        var x = str.indexOf(cha);
        for (var i = 0; i < num; i++) {
          x = str.indexOf(cha, x + 1);
        }
        return x;
      },
    }
  }
</script>

<style scoped lang="scss">
  .free {
    border: 1px solid #ccc;
    padding: 30px 10px 0;
    margin-bottom: 40px;

    li {
      margin-bottom: 20px;

      span {
        display: inline-block;
        width: 80px;
        text-align: right;
        margin-right: 10px;
      }

    }

    .first {

      .el-input {
        width: 60%;
      }

    }

    .second {

      .el-input {
        width: 20%;
      }

    }
  }
</style>
